<template>
	<default-header-page-layout ref="page" title="人工出库" >
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content manual-out-page">
				<!-- page start -->
				<view class="top-search">
					<scan-input-form-item
						label="托盘编码"
						v-model="form.containter"
						:msg="msg.containter"
						:msg-type="msgType.containter"
						@search="onSearch"
						@clear="onClearContainer"
					/>
				</view>
				<template v-if="list.length>0">
					<view class="materials-header">
						<view class="header-row">
							<view class="line"></view>
							<view class="title">
								<text class="text">物料详情</text>
							</view>
						</view>
					</view>
					<view class="materials-block">
						<view class="materials-block-padding">
							<view class="materials-box">
								<view class="material-item-group">
									<view class="material-list-item" v-for="(item,index) in list" :key="'material-list-item-'+index">
										<view class="badge-box"><u-badge :value="index+1" bg-color="#F18201" /></view>
										<view class="item-row">
											<view class="label">物料编号：</view>
											<view class="content auto-wrap">{{item.materialno}}</view>
										</view>
										<view class="item-row">
											<view class="label">物料名称：</view>
											<view class="content auto-wrap">{{item.materialname}}</view>
										</view>
										<view class="item-row">
											<view class="label">批次号：</view>
											<view class="content auto-wrap">{{item.materialbatch}}</view>
										</view>
										<view class="item-row">
											<view class="label">规格：</view>
											<view class="content auto-wrap">{{item.materialspec}}</view>
										</view>
										<view class="item-row">
											<view class="label">密度：</view>
											<view class="content auto-wrap">{{item.materialDensity}}</view>
										</view>
										<view class="item-row">
											<view class="label">数量：</view>
											<view class="content auto-wrap">{{item.bindquantity}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<!-- page end -->
			</view>
		</view>
		<template v-slot:footer>
			<view class="bottom-btns-row">
				<div class="btn-frame left-btn-frame"><u-button text="重 置" @click="onReset"></u-button></div>
				<div class="btn-frame right-btn-frame"><u-button type="primary" text="确 定" :disabled="(!containter || containter.containerstatus!==3)" @click="onConfirm"></u-button></div>
			</view>
		</template>
	</default-header-page-layout>
</template>

<script>
import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
import ActionUserRow from '@/components/ActionUserRow.vue'
import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
import { parseDic, $successInfo } from '@/static/js/utils/index.js'
let initInterVal = null;
const defaultForm = {
	containter:''
}
export default {
	name:'manualOutPage',
	components:{DefaultHeaderPageLayout,ActionUserRow,ScanInputFormItem},
	data(){
		return {
			pageBodyHeight:0,
			form:{...defaultForm},
			msg:{
				containter:''
			},
			msgType:{
				containter:'error'
			},
			containter:null,
			list:[]
		}
	},
	methods:{
		/* 托盘编码搜索 */
		onSearch(){
			if (!this.form.containter) {
			  this.msgType.containter = 'error'
			  this.msg.containter = '请输入托盘号！';
			  return false;
			}
			this.msg.containter = '';
			this.getData()
		},
		/* 清除托盘编码 */
		onClearContainer(){
			this.resetContainer()
		},
		/* 重置托盘编码 */
		resetContainer(){
			this.form.containter = ''
			this.msg.containter = ''
			this.containter = null
			this.list = []
		},
		/* 获取托盘信息 */
		getData(){
			let params = {Containercode:this.form.containter}
			this.$api.get('PDAGetContainer',params,{block:'exware',fullRes:true}).then((d)=>{
				if (d.data) {
					let _temp1 = parseDic(this.$store,'container_type',d.data.wmsContainer.containertype)
					let _temp2 = parseDic(this.$store,'container_status',d.data.wmsContainer.containerstatus)
				  this.msgType.containter = 'info'
				  this.msg.containter = `材质：${_temp1}，状态：${_temp2}`;
				  this.containter = d.data.wmsContainer
				  if (d.data.wmsMaterials) {
				    this.list = d.data.wmsMaterials
				  } else {
						this.list = []
					}
				} else {
				  this.msgType.containter = 'error'
				  this.msg.containter = d.message || '查无信息！';
				  this.containter = null;
				  this.list = []
				}
			}).catch(()=>{
				this.containter = null;
			})
		},
		/* 响应重置按钮 */
		onReset(){
			this.resetContainer()
		},
		/* 响应确认按钮 */
		onConfirm(){
			this.dealSubmit((f)=>{
			  if (f) {
					this.resetContainer()
			    $successInfo('出库成功！');
			  } 
			})
		},
		/* 出库接口调用 */
		dealSubmit(callback){
			let params = {
			  containercode:this.containter.containercode
			}
			this.$api.post('PDAManualWare',params,{block:'exware'}).then(()=>{
				callback && callback(true)
			}).catch(()=>{
				callback && callback(false)
			})
		},
		/* 页面初始化获取页面body高度的定时器 */
		startInitInterval(callback){
			initInterVal = setInterval(()=>{
				if (this.pageBodyHeight) {
					this.clearInitInterval()
					callback && callback()
				} else {
					this.pageBodyHeight = this.$refs.page.getBodyHeight()
				}
			},200)
		},
		/* 清除定时器 */
		clearInitInterval(){
			try{
				clearInterval(initInterVal)
				initInterVal = null
			}catch(e){
				//TODO handle the exception
			}
		}
	},
	onReady(){
		this.startInitInterval(()=>{
			/* 页面初始化后需要执行的代码在这边调用 */
		})
	},
	onUnload(){
		this.clearInitInterval()
	}
}
</script>

<style scoped lang="scss">
.manual-out-page{
	display: flex;
	flex-direction: column;
	.materials-header,.top-search{
		flex-shrink: 0;
	}
	.materials-header{
		padding: 12rpx 16rpx 0 16rpx;
		.header-row{
			position: relative;
			top:0;
			left: 0;
			width: 100%;
			height: 50rpx;
			display: flex;
			align-items: center;
			background-color: $uni-bg-color;
			&>.line{
				width: 100%;
				height: 2rpx;
				background-color: $uni-border-color;
			}
			&>.title{
				position: absolute;
				top:0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 1;
				&>.text{
					font-size: 30rpx;
					background-color: $uni-bg-color;
					color: $uni-border-color;
					padding: 4rpx 12rpx;
				}
			}
		}
	}
	.materials-block{
		flex-grow: 1;
		overflow: auto;
		.materials-block-padding{
			padding: 0 16rpx;
			.materials-box{
				background-color: $uni-bg-color;
				border-radius: 6rpx;
				box-sizing: border-box;
				position: relative;
			}
		}
	}
}
.bottom-btns-row{
	display: flex;
	padding: 10rpx 0;
	background-color: #fff;
	.btn-frame{
		width: 50%;
		box-sizing: border-box;
	}
	.left-btn-frame{
		padding-left: 20rpx;
		padding-right: 8rpx;
	}
	.right-btn-frame{
		padding-right: 20rpx;
		padding-left: 8rpx;
	}
}
.material-item-group{
	padding: 0 4rpx;
	.material-list-item{
		border-bottom: 2rpx solid $uni-border-color;
		padding-bottom: 10rpx;
		padding-left: 60rpx;
		margin-bottom: 10rpx;
		position: relative;
		&:last-child{
			border-bottom: 0;
		}
		.item-row{
			display: flex;
			&>.label{
				flex-shrink: 0;
				color: $u-tips-color;
				width: 144rpx;
			}
			&>.content{
				flex-grow: 1;
				color: $u-content-color;
			}
		}
		.badge-box{
			position: absolute;
			top:8rpx;
			left: 8rpx;
			z-index: 1;
		}
	}
}
</style>